<script setup lang="ts">
import {getTeacherList} from "@/api/home/index";
import {ref} from "vue";

let teacherList = ref([])
let url = 'http://192.168.5.120:8090'
getTeacherList().then((res) => {
    if (res.code === 200) {
        teacherList.value = res.rows
        console.log(teacherList.value)
    }
})
</script>

<template>
    <div class="teacher-list-container">
        <div class="teacher-list-top">
            <router-link to="/index" >
                <van-icon name="arrow-left"/>
                <span>咨询师</span>
            </router-link>
        </div>
        <section class="teacher-list-body">
            <ul class="teacher-list">
                <router-link :to="{path:'/teacherDetail',query:{id:item.id}}" v-for="item in teacherList"  :key="item.id">
                    <li class="list-item"  >
                        <div class="list-left">
                            <van-image
                                width="5rem"
                                height="5rem"
                                fit="cover"
                                :src="url + item.avatar"
                                radius="8px"
                            />
                        </div>
                        <div class="list-right">
                            <van-space direction="vertical" fill>
                                <div class="list-first-line">
                                    <b>{{ item.name }}</b>

                                    <van-button v-if="item.state === '0'" color="#DBDBDB" size="small" style="width: 50px;height: 25px">已满</van-button>
                                    <van-button v-if="item.state === '1'" color="#1892FF" size="small" style="width: 50px;height: 25px">可约</van-button>
                                </div>
                                <div class="list-profession">{{ item.profession }}</div>
                                <div class="list-label">
                                    <van-space :size="5">
                                        <div class="label-item" v-for="label in item.labels">{{ label.label }}</div>
                                    </van-space>
                                </div>
                            </van-space>
                        </div>
                    </li>
                </router-link>
            </ul>
        </section>
    </div>
</template>

<style scoped lang="less">
a {
    color:#333333;
}
.teacher-list-container {
    background-color: #F8F8F8;
    .teacher-list-top {
        padding: 10px;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        background-color: white;
        span {
            margin-left: 10px;
        }
    }

    .teacher-list-body {
        padding: 15px;
        box-sizing: border-box;

        .list-item {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            background-color: white;
            border-radius: 10px;
            height: 100px;
            overflow: hidden;

            .list-left {
                margin-top: 10px;
                margin-left: 10px;
                width: 26%;
                height: 50px;
            }

            .list-right {
                padding: 10px;
                width: 74%;
                box-sizing: border-box;

                .list-first-line {
                    display: flex;
                    justify-content: space-between;
                    b {
                        color: #333;
                    }
                }
                .list-profession {
                    font-size: 14px;
                    color: #ccc;
                }
                .list-label {
                    display: flex;
                    font-size: 11px;
                    .label-item {
                        padding: 5px 3px;
                        background-color: #F2F9FF;
                        color: #1590FB;
                        border-radius: 5px;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
}
</style>